<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="renderer" content="webkit">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="js/jquery-easyui-1.4.4/themes/bootstrap/easyui.css">
		<link rel="stylesheet" href="js/jquery-easyui-1.4.4/themes/icon.css">
		<link rel="stylesheet" href="css/ext_icon.css">
		<script src="js/jquery-easyui-1.4.4/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
		<script src="js/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
		<script src="js/ext_jquery.js"></script>
		<script src="js/ext_easyui.js"></script>
		<script src="js/jquery.form.js"></script>
		<script src="js/My97DatePicker/WdatePicker.js"></script>
		<script src="js/Chart.min.js"></script>
		<script src="js/util.js"></script>
		<script src="js/ckeditor/ckeditor.js"></script>
		<link rel="stylesheet" href="css/style.css">
		<script src="js/main.js"></script>
		<title>form</title>
	</head>

	<body>
		<script>
			$(function() {
				var submitForm = $('.form-table');
				var options = {
					dataType: 'json',
					beforeSubmit: function() {
						parent.$.messager.progress({
							title: '提示',
							text: '数据保存中，请稍后....'
						});
						return true;
					},
					success: function(result) {
						parent.$.messager.progress('close');
						if (result.success) {
							parent.$.messager.show({
								title: '提示',
								msg: '成功!',
								timeout: 3000
							});
							//parent.$.modalDialog.openner_dataGrid.datagrid('reload'); //刷新表格
							//parent.$.modalDialog.handler.dialog('close');
							removeTabs();
						} else {
							parent.$.messager.alert('错误', result.msg, 'error');
						}
					}
				};
				submitForm.bind('submit', function(e) {
					e.preventDefault(); // <-- important
					$(this).ajaxSubmit(options);
				});
			});

			function submitForm() {
				if ($('.form-table').form('enableValidation').form('validate')) {
					//$('.form-table').submit();
					parent.$.messager.show({
						title: '提示',
						msg: '成功!',
						timeout: 3000
					});
					removeTabs();
				} else {
					parent.$.messager.alert('错误', '错了', 'error');
				}
			}
		</script>
		<form class="form-table" style="width: 60%;" method="post">
			<table class="table table-bordered table-condensed">
				<tr>
					<th width="30%">用户名：</th>
					<td>这是展示的</td>
				</tr>
				<tr>
					<th>文本框（必选）：</th>
					<td>
						<input class="easyui-textbox" data-options="
								prompt:'这是必选的文本框',
								required:true,
								icons:[{
									iconCls:'icon-clear',
									handler:function(e){
										$(e.data.target).textbox('clear');
										}
									}]" style="width: 100%;height: 30px;">
					</td>
				</tr>
				<tr>
					<th>数字框：</th>
					<td>
						<input class="easyui-numberspinner" data-options="
								prompt:'专为数字而设',
								precision:0,
								increment:1,
								icons: [{
									iconCls:'icon-clear',
									handler: function(e){
										$(e.data.target).textbox('clear');
										}
									}]" style="width: 100%;height: 30px;">
					</td>
				</tr>
				<tr>
					<th>号码框：</th>
					<td>
						<input class="easyui-numberbox" data-options="
								prompt:'可以在数字前后加特殊符号',
								precision:2,
								groupSeparator:',',
								decimalSeparator:'.',
								prefix:'$',
								suffix:'€',
								icons: [{
									iconCls:'icon-clear',
									handler: function(e){
										$(e.data.target).textbox('clear');
										}
									}]" style="width: 100%;height: 30px;">
					</td>
				</tr>
				<tr>
					<th>日期框：</th>
					<td>
						<input class="easyui-datebox" data-options="
								sharedCalendar:'#cc',
								icons: [{
									iconCls:'icon-clear',
									handler: function(e){
										$(e.data.target).textbox('clear');
										}
									}]" style="width: 100%;height: 30px;">
					</td>
				</tr>
				<tr>
					<th>日期时间框：</th>
					<td>
						<input class="easyui-datetimebox" data-options="
								icons: [{
									iconCls:'icon-clear',
									handler: function(e){
										$(e.data.target).textbox('clear');
										}
									}]" style="width: 100%;height: 30px;">
					</td>
				</tr>
				<tr>
					<th>上传框：</th>
					<td>
						<input class="easyui-filebox" data-options="
								prompt:'上传文件……',
								buttonText:'上传文件',
								icons: [{
									iconCls:'icon-clear',
									handler: function(e){
										$(e.data.target).textbox('clear');
										}
									}]" style="width: 100%;height: 30px;">
					</td>
				</tr>
				<tr>
					<th>单选框（默认选中第一个）：</th>
					<td>
						<select class="easyui-combobox" data-options="
								panelHeight:'auto',
								editable:false,
								icons: [{
									iconCls:'icon-clear',
									handler: function(e){
										$(e.data.target).textbox('clear');
										}
									}]" style="width: 100%;height: 30px;">
							<option value="1">来一个</option>
							<option selected="selected" value="2">变两个</option>
						</select>
					</td>
				</tr>
				<tr>
					<th>单选框（一开始为空）：</th>
					<td>
						<input class="easyui-combobox" data-options="
								panelHeight:'auto',
								editable:false,
								icons: [{
									iconCls:'icon-clear',
									handler: function(e){
										$(e.data.target).textbox('clear');
										}
									}],
								data:[{'userCount':'0','roleId':'1','roleName':'超级管理员'},{'userCount':'1','roleId':'2','roleName':'系统管理员','selected':true}],
								valueField:'roleId',
								textField:'roleName'" style="width: 100%;height: 30px;">
					</td>
				</tr>
				<tr>
					<th>多选框：</th>
					<td>
						<input class="easyui-combobox" data-options="
								panelHeight:'auto',
								editable:false,
								multiple:true,
								icons: [{
									iconCls:'icon-clear',
									handler: function(e){
										$(e.data.target).textbox('clear');
										}
									}],
								url:'combobox_data2.json',
								data:'',
								valueField:'id',
								textField:'text'" style="width: 100%;height: 30px;">
					</td>
				</tr>
				<tr>
					<td colspan="2">合并列</td>
				</tr>
				<tr>
					<th rowspan="2">合并行：</th>
					<td>第一行</td>
				</tr>
				<tr>
					<td>第二行</td>
				</tr>
			</table>
			<table class="table table-bordered table-condensed">
				<tr>
					<th width="30%">1</th>
					<td>
						<input name="a1" class="easyui-textbox" data-options="required:true" style="width: 100%; height: 30px;">
					</td>
					<th width="10%">2</th>
					<td>
						<input name="a2" class="easyui-textbox" data-options="required:true" style="width: 100%; height: 30px;">
					</td>
				</tr>
				<tr>
					<th>3</th>
					<td colspan="3">
						<input name="a3" class="easyui-textbox" data-options="required:true" style="width: 100%; height: 30px;">
					</td>
				</tr>
				<tr>
					<th>4</th>
					<td colspan="3">
						<input name="a4" class="easyui-textbox" data-options="required:true" style="width: 100%; height: 30px;">
					</td>
				</tr>
				<tr>
					<th>5</th>
					<td colspan="3">
						<input class="easyui-combobox" data-options="
								panelHeight:'auto',
								editable:false,
								data:[{'userCount':'0','roleId':'1','roleName':'超级管理员'},{'userCount':'1','roleId':'2','roleName':'系统管理员','selected':true}],
								valueField:'roleId',
								textField:'roleName'" style="width: 100%;height: 30px;">
					</td>
				</tr>
			</table>
		</form>
		<div style="text-align: center;padding-bottom: 10px;">
			<a href="javascript:void(0);" class="btn btn-primary" role="button" onclick="submitForm();return false;">提&nbsp;&nbsp;&nbsp;&nbsp;交</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="javascript:void(0);" class="btn btn-primary" role="button" onclick="$('.form-table').form('clear');">重&nbsp;&nbsp;&nbsp;&nbsp;置</a>
		</div>
		<div id="cc" class="easyui-calendar"></div>
	</body>

</html>